{% load i18n %}
<div class="card-body select-template">
  <h3>{% translate "Templates" %} <div style="display: inline-block; margin-left: 10px; bottom: 2px;" aria-label="{% translate "Drag and drop the items below into the sequence blocks to add them" %}" data-microtip-position="top" role="tooltip" > <svg xmlns="http://www.w3.org/2000/svg" style="width: 16px; height: 16px;"  class="icon icon-tabler icon-tabler-info-square-rounded" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 9h.01" /><path d="M11 12h1v4h1" /><path d="M12 3c7.2 0 9 1.8 9 9s-1.8 9 -9 9s-9 -1.8 -9 -9s1.8 -9 9 -9z" /></svg></div> </h3>
  {% if sequence.is_onboarding %}
  <button aria-label="{% translate "Todo items" %}" data-microtip-position="top" role="tooltip" hx-get="{% url 'sequences:template_list' sequence.id %}?type=todo" class="btn btn-{% if active == 'todo' %}primary{% else %}white{% endif %}" hx-target="#template-list" hx-indicator="#spinner">
    {% include '_todo_icon.html' %}
  </button>
  {% endif %}
  <button aria-label="{% translate "Resources" %}" data-microtip-position="top" role="tooltip" hx-get="{% url 'sequences:template_list' sequence.id %}?type=resource" class="btn btn-{% if active == 'resource' %}primary{% else %}white{% endif %}" hx-target="#template-list" hx-indicator="#spinner">
    {% include '_resource_icon.html' %}
  </button>
  {% if sequence.is_onboarding %}
  <button aria-label="{% translate "Introductions" %}" data-microtip-position="top" role="tooltip" hx-get="{% url 'sequences:template_list' sequence.id %}?type=introduction" class="btn btn-{% if active == 'introduction' %}primary{% else %}white{% endif %}" hx-target="#template-list" hx-indicator="#spinner">
    {% include '_intro_icon.html' %}
  </button>
  {% endif %}
  <button aria-label="{% translate "Appointments" %}" data-microtip-position="top" role="tooltip" hx-get="{% url 'sequences:template_list' sequence.id %}?type=appointment" class="btn btn-{% if active == 'appointment' %}primary{% else %}white{% endif %}" hx-target="#template-list" hx-indicator="#spinner">
    {% include '_appointment_icon.html' %}
  </button>
  {% if sequence.is_onboarding %}
  <button aria-label="{% translate "Badges" %}" data-microtip-position="top" role="tooltip" hx-get="{% url 'sequences:template_list' sequence.id %}?type=badge" class="btn btn-{% if active == 'badge' %}primary{% else %}white{% endif %}" hx-target="#template-list" hx-indicator="#spinner">
    {% include '_badge_icon.html' %}
  </button>
  <button aria-label="{% translate "Preboarding items" %}" data-microtip-position="top" role="tooltip" hx-get="{% url 'sequences:template_list' sequence.id %}?type=preboarding" class="btn btn-{% if active == 'preboarding' %}primary{% else %}white{% endif %}" hx-target="#template-list" hx-indicator="#spinner">
    {% include '_preboarding_icon.html' %}
  </button>
  {% endif %}
  <button aria-label="{% translate "Admin Tasks" %}" data-microtip-position="top" role="tooltip" hx-get="{% url 'sequences:template_list' sequence.id %}?type=pendingadmintask" class="btn btn-{% if active == 'pendingadmintask' %}primary{% else %}white{% endif %}" hx-target="#template-list" hx-indicator="#spinner">
    {% include '_admin_task_icon.html' %}
  </button>
  <button aria-label="{% translate "Slack message" %}" data-microtip-position="top" role="tooltip" hx-get="{% url 'sequences:template_list' sequence.id %}?type=pendingslackmessage" class="btn btn-{% if active == 'pendingslackmessage' %}primary{% else %}white{% endif %}" hx-target="#template-list" hx-indicator="#spinner">
    {% include '_slack_icon.html' %}
  </button>
  <button aria-label="{% translate "Text message" %}" data-microtip-position="top" role="tooltip" hx-get="{% url 'sequences:template_list' sequence.id %}?type=pendingtextmessage" class="btn btn-{% if active == 'pendingtextmessage' %}primary{% else %}white{% endif %}" hx-target="#template-list" hx-indicator="#spinner">
    {% include '_text_icon.html' %}
  </button>
  <button aria-label="{% translate "Email message" %}" data-microtip-position="top" role="tooltip" hx-get="{% url 'sequences:template_list' sequence.id %}?type=pendingemailmessage" class="btn btn-{% if active == 'pendingemailmessage' %}primary{% else %}white{% endif %}" hx-target="#template-list" hx-indicator="#spinner">
    {% include '_email_icon.html' %}
  </button>
  <button aria-label="{% translate "Integrations" %}" data-microtip-position="top" role="tooltip" hx-get="{% url 'sequences:template_list' sequence.id %}?type=integration" class="btn btn-{% if active == 'integration' %}primary{% else %}white{% endif %}" hx-target="#template-list" hx-indicator="#spinner">
    {% include '_integration_config.html' %}
  </button>
  <button aria-label="{% translate "Hardware" %}" data-microtip-position="top" role="tooltip" hx-get="{% url 'sequences:template_list' sequence.id %}?type=hardware" class="btn btn-{% if active == 'hardware' %}primary{% else %}white{% endif %}" hx-target="#template-list" hx-indicator="#spinner">
    {% include '_hardware_icon.html' %}
  </button>
  <div style="display: inline-flex;">
    <span class="requesting" id="spinner">
      <div class="spinner-border spinner-border-sm text-muted" role="status"></div>
    </span>
  </div>

</div>
{% if object_list %}
<div class="card-body card-body-scrollable card-body-scrollable-shadow">
  <div class="divide-y">
    {% for template in object_list %}
    <div>
      <div class="row" draggable="true" style="cursor:grab" data-id="{{template.id}}" data-type="{{ active }}">
        <div class="col">
          <div class="text-truncate">
            <p style="margin-bottom:0px">{{ template.name }}</p>
          </div>
          <div class="text-right">{% for tag in template.tags %}<span class="badge bg-blue-lt text-blue-lt-fg" style="margin-right: 10px; font-size: 10px;">{{ tag }}</span>{% endfor %}</div>
        </div>
      </div>
    </div>
    {% endfor %}
  </div>
</div>
{% endif %}
{% if active != 'integration' %}
<div class="card-footer">
  <div>
    <div class="row" draggable="true" style="cursor:grab" data-id="0" data-type="{{ active }}"
        aria-label="{% translate "Drag this unto a sequence block to create new item" %}" data-microtip-position="bottom" role="tooltip">
      <div class="col-auto align-self-center">
        <div class="badge bg-primary"></div>
      </div>
      <div class="col">
        <div class="text-truncate">
          <strong>{% translate "Create new one" %}</strong>
        </div>
      </div>
    </div>
  </div>
</div>
{% endif %}
